// pages/my/my.js
/**
 * we-cropper 使用：
 * https://juejin.cn/post/7132664166174687239
 */
import { getUserInfo ,updateUserInfo} from '../../api/user'
import WeCropper from '../../utils/we-cropper/we-cropper.min'

// const device = wx.getSystemInfoSync()
// const width = device.windowWidth
// const height = device.windowHeight - 50
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight - 200

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 旧的avatar：https://img2.baidu.com/it/u=1477138556,2382360194&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400
    userInfo: null,
    clipShow: false, // 是否显示裁剪
    cropperOpt: {
      id: 'cropper', // 用于手势操作的canvas组件标识符
      targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
      pixelRatio: device.pixelRatio, // 传入设备像素比
      width,  // 画布宽度
      height, // 画布高度
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      cut: {
        x: (width - 200) / 2, // 裁剪框x轴起点
        y: (width - 200) / 2, // 裁剪框y轴期起点
        width: 200, // 裁剪框宽度
        height: 200 // 裁剪框高度
      },
      boundStyle: {
        color: '#04b00f',
        mask: 'rgba(0,0,0,0.8)',
        lineWidth: 1
      }
    }
  },
  touchStart(e) {
    this.cropper.touchStart(e)
  },
  touchMove(e) {
    this.cropper.touchMove(e)
  },
  touchEnd(e) {
    this.cropper.touchEnd(e)
  },
  onLoad(option) {
    const { cropperOpt } = this.data

    this.cropper = new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
      })
      .on('beforeImageLoad', (ctx) => {

      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      })
  },
  onShow() {
    const token = wx.getStorageSync('token')
    if (token) {
      this.getUserInfoData()
    } else {
      wx.redirectTo({
        url: '/subpkg/login/login',
      })
    }
  },
  async getUserInfoData() {
    const res = await getUserInfo()

    if (res.code === 200) {
      this.setData({
        userInfo: res.data
      })
    }
  },
  logout() {
    wx.showModal({
      title: '提示',
      content: '确定退出吗?',
      confirmColor: "#c82519",
      complete: (res) => {
        if (res.cancel) {

        }

        if (res.confirm) {
          // 删除token
          wx.removeStorageSync('token')
          // 跳转到登录页面（独立的页面栈）
          wx.redirectTo({
            url: '/subpkg/login/login',
          })
        }
      }
    })
  },
  goToOrderList() {
    wx.navigateTo({
      url: '/subpkg/order-list/order-list',
    })
  },
  // 我的发票
  invocie() {
    wx.navigateTo({
      url: '/subpkg/invoice/invoice',
    })
  },
  upload() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image', 'video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      success: (res) => {
        const src = res.tempFiles[0].tempFilePath
        //  获取裁剪图片资源后，给data添加src属性及其值
        this.cropper.pushOrign(src)

        this.setData({
          clipShow: true
        })
      }
    })
  },
  getCropperImage() {
    this.wecropper.getCropperImage((tempFilePath) => {
      // tempFilePath 为裁剪后的图片临时路径
      if (tempFilePath) {
        // 上传图片
        wx.uploadFile({
          url: 'https://huangjiangjun.top:3002/admin/file/avatars/upload', //仅为示例，非真实的接口地址
          filePath: tempFilePath,
          name: 'file',
          success: async res => {
            if (res.data) {
              const resObj = JSON.parse(res.data)
              this.setData({
                userInfo: {...this.data.userInfo,avatar: resObj.fileUrl},
                clipShow: false
              })

              await updateUserInfo({
                avatar: resObj.fileUrl
              })
            }
          },
          fail: err => {
            console.log('---err---', err)
          }
        })

      } else {
        console.log('获取图片地址失败，请稍后重试')
      }
    })
  }
})